<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户列表</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" >

</head>
<body>

<div class="container">

    <h1>用户列表</h1>
    <button type="button" class="btn btn-primary" onclick="window.location.href='/user/toUserSave'">新增用户</button>
    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>昵称</th>
            <th>性别</th>
            <th>电话</th>
            <th>余额</th>
            <th>是否会员</th>
            <th>是否管理员</th>
            <th>账号状态</th>
            <th>账号创建时间</th>
            <th>上次修改时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.alluser}" var="user">
            <tr>
                <td>${user.userId}</td>
                <td>${user.username}</td>
                <td>${user.nickName}</td>
                <td><c:if test="${user.gender == 1}">男</c:if> <c:if test="${user.gender == 0}">女</c:if> </td>
                <td>${user.phone}</td>
                <td>${user.balance}</td>
                <td><c:if test="${user.isMember == 1}">是</c:if> <c:if test="${user.isMember == 0}">否</c:if> </td>
                <td><c:if test="${user.isAdmin == 1}">是</c:if> <c:if test="${user.isAdmin == 0}">否</c:if> </td>
                <td><c:if test="${user.userStatus == 1}">已激活</c:if> <c:if test="${user.userStatus == 0}">未激活</c:if> </td>
                <td>${user.userCreateTime}</td>
                <td>${user.userUpdateTime}</td>
                <td width="100px">
                    <button type="button" class="btn btn-info btn-xs">编辑</button>
                    <button type="button" class="btn btn-danger btn-xs" onclick="deleteUserById(this, ${user.userId})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</body>

<script>
    function deleteUserById(obj, userId) {
        $.ajax({
            url : "/user/deleteUserById/" + userId,
            type : "delete",
            dataType : "json",
            success : function (result) {
                $(obj).parent().parent().remove();
                alert(result.message)
            },
        })
    }
</script>

</html>
